<template>
  <a-card :bordered="false" v-if="show">
    <div style="position: absolute;right: 0;margin: 20px 25px;color: #999999;font-size: 12px">{{ countText }}</div>
    <a-tabs default-active-key="1" @change="changeTable">
      <a-tab-pane :key="1" tab="单曲" >
        <playlist-detail ref="playlistDetail" :fromSearchPath="true" :text="text" @ok="handleCountSong"/>
      </a-tab-pane>
      <a-tab-pane :key="2" tab="歌单" >
        <music-square ref="musicSquare" :fromSearchPath="true" :text="text" @ok="handleCountPlaylist"/>
      </a-tab-pane>
      <a-tab-pane :key="3" tab="用户" >
        <user-list ref="userList" :fromSearchPath="true" :text="text" @ok="handleCountUser"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  // import moment from 'moment'
  import { STable } from '@/components'
  import MusicSquare from './MusicSquare'
  import PlaylistDetail from './PlaylistDetail'
  import UserList from '../user/UserList'

  export default {
    name: 'CollectionPlaylistDetail',
    components: {
      STable,
      MusicSquare,
      PlaylistDetail,
      UserList
    },
    data () {
      return {
        text: '',
        countText: '',
        countSong: '',
        countPlaylist: '',
        countUser: '',
        show: true
      }
    },
    created () {
      this.text = this.$route.params.text
    },
    mounted () {
      const tags = window.document.getElementsByClassName('ant-tabs-tab')
      tags[0].click()
    },
    methods: {
      handleCountSong (countSong) {
        this.countSong = '共找到 ' + countSong
        this.countText = this.countSong
      },
      handleCountPlaylist (countPlaylist) {
        this.countPlaylist = '共找到 ' + countPlaylist
        this.countText = this.countPlaylist
      },
      handleCountUser (countUser) {
        this.countUser = '共找到 ' + countUser
        this.countText = this.countUser
      },
      changeTable (key) {
        if (key === 1) {
          this.countText = this.countSong
        } else if (key === 2) {
          this.countText = this.countPlaylist
        } else if (key === 3) {
          this.countText = this.countUser
        } else {
          console.log(key)
        }
      }
    }
  }
</script>
